<template>
    <!-- 搜索区域 -->
    <div style="display: flex">
        <el-input v-model="searchUsername" placeholder="请输入学员姓名"
                  style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-input v-model="searchCourseName" placeholder="请输入课程名称"
                  style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-input v-model="searchTeachPlanName" placeholder="请输入资料名称"
                  style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-select style="width: 200px;margin-right: 15px" placeholder="请选择课时进度" v-model="searchFlow" clearable>
            <el-option v-for="item in flowOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>

    <!-- 表格区域 -->
    <el-table :data="tableData" :row-style="{ height: '77px' }" border
              style="width: calc(100vw - 240px);margin-top: 20px;height: 75vh;color: #909399;font-size: 15px;">
        <el-table-column align="center" prop="courseName" label="课程名称" />
        <el-table-column align="center" prop="teachPlanName" label="资料名称" />
        <el-table-column align="center" prop="username" label="学员姓名" />
        <el-table-column align="center" prop="createTime" label="查看时间" sortable />
        <el-table-column align="center" prop="flow" label="查看进度">
            <template v-slot="scope">
                <el-tag type="warning" v-if="scope.row.flow === 0">未完成</el-tag>
                <el-tag type="success" v-else-if="scope.row.flow === 1">已完成</el-tag>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div style="margin-top: 10px">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper" :total="total" :background="true"
                       @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <ImagePreview ref="preview" :imageUrl="currentPreviewImage" />
</template>

<script>
    import request from "~/utils/request.js";
    import ImagePreview from '~/pages/ImagePreview.vue';

    export default {
        components: {
            ImagePreview
        },
        data() {
            return {
                tableData: [],
                searchUsername: '',
                searchCourseName: '',
                searchTeachPlanName: '',
                searchFlow: '',
                stuId: '',
                flowOptions: [
                    { value: 0, label: '未完成' },
                    { value: 1, label: '已完成' },
                ],
                currentPage: 1,
                pageSize: 10,
                total: 0,
                currentPreviewImage: '' // 当前预览的图片URL
            }
        },
        created() {
            this.load()
        },
        methods: {
            load() {
                if (this.searchFlow === undefined) {
                    this.searchFlow = ''
                }
                if (this.$route.query.stuId === undefined) {
                    this.stuId = ''
                } else {
                    this.stuId = this.$route.query.stuId
                }
                request.get("/teach-plan-sign/page?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize + "&username=" + this.searchUsername + "&courseName=" + this.searchCourseName + "&teachPlanName=" + this.searchTeachPlanName + "&flow=" + this.searchFlow + "&stuId=" + this.stuId).then(res => {
                    if (res.code === '200') {
                        this.tableData = res.data.records
                        this.total = res.data.total
                        // 准备预览图片列表
                        this.previewImages = this.tableData.map(item => item.photo).concat(
                            this.tableData.map(item => item.url)
                        ).filter(Boolean);
                    } else {
                        ElMessage.error("错误" + res.msg)
                    }
                })
            },
            handleCurrentChange(item) {
                this.currentPage = item
                this.load()
            },
            handleSizeChange(item) {
                this.pageSize = item
                this.load()
            },
            openPreview(imageUrl) {
                if (!imageUrl) return;
                this.currentPreviewImage = imageUrl;
                this.$nextTick(() => {
                    this.$refs.preview.open();
                });
            }
        }
    }
</script>

<style scoped>
    /* 可以添加一些自定义样式 */
</style>
